<template>
  <div class="height_width-full box-body">
    <div class="main">
      <el-row class="width-full" type="flex" justify="center">
        <el-col :span="6">
          <!-- 图片区域 -->
          <div>
            <img :src="require('@/assets/logo.png')" alt="">
          </div>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>用户登录</span>
              <span class="code-text" v-if="time > 0">您的验证码为：<span style="color: red">{{ code }}</span> , 将在 <span
                style="color: red">{{ time }}</span> 秒后过期</span>
              <i class="el-icon-s-custom user-icon"></i>
            </div>
            <!-- 表单区域 -->
            <div>
              <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm"
                       label-position="right">
                <el-form-item label="用户名" prop="loginName">
                  <el-input placeholder="请输入用户名" v-model.trim="loginForm.loginName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input placeholder="请输入密码" type="password" v-model.trim="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <el-col :span="16">
                    <el-input placeholder="请输入验证码" v-model.trim="loginForm.code"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" @click="getCode()">发送验证码</el-button>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :span="12">
                    <el-button type="success" class="login-btn" @click="login('loginForm')">登&nbsp;录</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-link type="danger">没有账号？点击注册</el-link>
                  </el-col>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        loginName: "",
        password: "",
        code: ""
      },
      rules: {
        loginName: [
          {required: true, message: "请输入用户名", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 3, max: 18, message: "长度在3到18之间", trigger: "blur"}
        ],
        code: [
          {required: true, message: "请输入验证码", trigger: "blur"},
          {min: 5, max: 5, message: "长度为五个字符", trigger: "blur"},
        ]
      },
      code: 0,
      time: 0
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.code == 0) {
            this.$message.warning("请获取验证码");
            return;
          }
          if (this.code != this.loginForm.code) {
            this.$message.error("验证码错误");
            this.time = 0;
            this.code = 0;
            return;
          }
          if (this.time <= 0) {
            this.$message.error("验证码过期，请重新获取");
            return;
          }
          this.$post(this.$api.API_USER_LOGIN, {
            loginName: this.loginForm.loginName,
            password: this.loginForm.password
          }).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.message);
              this.$store.commit("setToken", res.data.data.token);
              this.$store.commit("setUser", res.data.data.user);
              this.$router.push({
                path: "/",
                name: "Index"
              })
            }
          })
        }
      });
    },
    getCode() {
      if (this.time > 0) {
        this.$message.warning("您的操作过于频繁，请稍后再试");
        return;
      }
      this.$get(this.$api.API_LOGIN_CODE).then(res => {
        this.code = res.data.data.code;
        this.time = 60;
        let flag = setInterval(() => {
          this.time--;
          if (this.time == 0) {
            clearInterval(flag);
          }
        }, 1000)
      })
    }
  }
}
</script>

<style scoped>

.main {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

.code-text {
  font-size: 12px;
  padding-left: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
  border: 0;
}

.box-body {
  background-color: #6cccbe;
}

.user-icon {
  float: right;
  padding: 3px 0;
  font-size: 18px;
  color: #1aba1a;
}

</style>
